<template>
	<zh-app style="font-family: '阿里巴巴普惠体'">
		<zh-navbar title="幼儿园报名" color="#85a5ff" linear="right"/>
		<zh-spin :load="data.btnDisabled" tip="报名信息提交中，请耐心等候">
		<zh-form ref="formRef"  :transprent="true"  @submit="submit" v-model="form" inputAlign="right" :label-width="180" :margin="[0, 24]" :padding="[10,0]">
		<zh-card :margin="[20, 10]">
			<template v-slot:title>
				<view style="border-left: 10rpx solid #2f54eb;">
					<zh-text  :fontSize="36" class="text-weight-b pl-10" label="基本信息"></zh-text>
				</view >
			</template>
			
			<template v-slot:content>
				<zh-form-input  field="childFullName" :rules="[{required:true,message:'请输入幼儿姓名'}]" placeholder="请输入幼儿姓名" v-model="form.childFullName" label="幼儿姓名" required showClear :transprent="true"></zh-form-input>
				<zh-form-select  field="childCardType"  :rules="[{required:true,message:'请选择幼儿证件类型'}]" placeholder="请选择幼儿证件类型" v-model="form.childCardType" :options="data.cardTypeDict" label="幼儿证件类型" required :showClear="false" :transprent="true"></zh-form-select>
				<zh-form-input  field="childIdcard" :type="form.childCardType==='01'?'idcard':'text'" :rules="[{required:true,message:'请输入幼儿证件号码'}]" placeholder="请输入幼儿证件号码" v-model="form.childIdcard" label="幼儿证件号码" required showClear :transprent="true" @blur="onblurChange" @clear="onclearIdcard"></zh-form-input>
				<zh-form-datetime  v-if="form.childCardType!=='01'" field="birthYmd" :rules="[{required:true,message:'请输入学生出生日期'}]" placeholder="请输入学生出生日期" v-model="form.birthYmd"  label="出生日期" required showClear model="day" :transprent="true" @blur="onblurChange" @clear="onclearbirth"></zh-form-datetime>
				<zh-form-select  v-if="form.childCardType!=='01'" field="sex" :rules="[{required:true,message:'请选择学生性别'}]" placeholder="请选择学生性别" v-model="form.sex" :options="data.sexDict" label="性别" required showClear :transprent="true"></zh-form-select>
				<zh-form-input  field="address" :rules="[{required:true,message:'请输入幼儿现居住地'}]" placeholder="请输入学生现居住地" v-model="form.address" label="现居住地" required showClear :transprent="true"></zh-form-input>
				<zh-form-input  field="householdPlace" :rules="[{required:true,message:'请输入幼儿户籍地'}]" placeholder="请输入学生户籍地" v-model="form.householdPlace" label="户籍地" required showClear :transprent="true"></zh-form-input>
				<zh-form-input  field="fatherName" :rules="[{required:false,message:'请输入父亲(监护人)姓名'}]" placeholder="请输入父亲(监护人)姓名" v-model="form.fatherName" label="父亲(监护人)姓名"  showClear :transprent="true"></zh-form-input>
				<zh-form-select  field="fatherCardType"  :rules="[{required:false,message:'请输入父亲(监护人)证件类型'}]" placeholder="请输入父亲(监护人)证件类型" v-model="form.fatherCardType" :options="data.cardTypeDict" label="父亲(监护人)证件类型" :showClear="false"  :transprent="true"></zh-form-select>
				<zh-form-input  field="fatherIdcard" :type="form.fatherCardType==='01'?'idcard':'text'" :rules="[{required:false,message:'请输入父亲(监护人)证件号码'}]" placeholder="请输入父亲(监护人)证件号码" v-model="form.fatherIdcard" label="父亲(监护人)证件号码"  showClear :transprent="true" @blur="onblurChange" @clear="onclearfa"></zh-form-input>
				<zh-form-input  field="fatherPhone" :rules="[{required:false,message:'请输入父亲(监护人)手机'}]" number placeholder="请输入父亲(监护人)手机" v-model="form.fatherPhone" label="父亲(监护人)手机"  showClear :transprent="true"></zh-form-input>
				<zh-form-input  field="motherName" :rules="[{required:false,message:'请输入母亲姓名'}]" placeholder="请输入母亲姓名" v-model="form.motherName" label="母亲姓名"  showClear :transprent="true"></zh-form-input>
				<zh-form-select  field="motherCardType"  :rules="[{required:false,message:'请输入母亲证件类型'}]" placeholder="请输入母亲证件类型" v-model="form.motherCardType" :options="data.cardTypeDict" label="母亲证件类型"  :showClear="false" :transprent="true"></zh-form-select>
				<zh-form-input  field="motherIdcard" :type="form.motherCardType==='01'?'idcard':'text'" :rules="[{required:false,message:'请输入母亲证件号码'}]" placeholder="请输入母亲证件号码" v-model="form.motherIdcard" label="母亲证件号码"  showClear :transprent="true" @blur="onblurChange" @clear="onclearmo"></zh-form-input>
				<zh-form-input  field="motherPhone" :rules="[{required:false,message:'请输入母亲手机'}]" type="number" placeholder="请输入母亲手机" v-model="form.motherPhone" label="母亲手机"  showClear :transprent="true"></zh-form-input>
			</template>
		</zh-card>
		<zh-card  :margin="[20, 10]">
			<template v-slot:title>
				<view style="border-left: 10rpx solid #2f54eb;">
					<zh-text  :fontSize="36" class="text-weight-b pl-10" label="报名信息"></zh-text>
				</view >
			</template>
			<template v-slot:content>
				<zh-form-desc :height="80" type="textarea" field="schoolName"  v-model="form.schoolName" label="报名学校" required  :disabled="true" :transprent="true"></zh-form-desc>
				<zh-form-select  field="configType" @confirm="configTypeChange" :fieldNames="{ label: 'configTypeName', value: 'configType', children: 'children' }" :rules="[{required:true,message:'请选择报名学段'}]" placeholder="请选择报名学段" :showClear="false" v-model="form.configType" :options="data.configTypeDict" label="报名学段" required  :transprent="true"></zh-form-select>
				<zh-sheet :round="3" v-if="!data.showForm"  :margin="[0, 0]" :padding="[20,20]" color="deep-orange" text>
					<zh-text  label="所有学段招生工作已结束,如有疑问,请致电幼儿园了解情况"></zh-text>
				</zh-sheet>
				<zh-form-select v-if="form.configType&&data.showForm" @confirm="formChange"  field="formId" :fieldNames="{ label: 'formName', value: 'formId', children: 'children' }" :rules="[{required:true,message:'请选择报名类别'}]" placeholder="请选择报名类别" v-model="form.formId"  :showClear="false" :options="data.selectFormDictData" label="报名类别" required  :transprent="true"></zh-form-select>
				<zh-sheet :round="3" v-if="form.configType&&data.showForm&&data.selectFormDictData.length<=0"  :margin="[0, 0]" :padding="[20,20]" color="deep-orange" text>
					<zh-text  label="该学段未配置报名类别,请致电幼儿园了解情况"></zh-text>
				</zh-sheet>
			</template>
		</zh-card>
		<zh-card  v-if="data.showFlag" :margin="[20, 10]">
			<template v-slot:title>
				<view style="border-left: 10rpx solid #2f54eb;">
					<zh-text  :fontSize="36" class="text-weight-b pl-10" label="报名材料"></zh-text>
				</view >
			</template>
			<template v-slot:content>
				<zh-form-upload
					field="householdPhoto"
					v-model="form.householdPhoto"
					v-model:fileList="form.fileList"
					label="户口信息"
					required
					:fileType="['image']"
					:rows="3"
					:maxFile="9"
					:width="620"
					:rules="[{required:true,message:'请上传户口本等照片，不少于3张'}]"
				>
					<template v-slot:desc>
						<zh-text color="grey-darken-2" :font-size="22"  label="1.新生和父母在同一户口本，需上传①户主页，②父亲页， ③母亲页，④新生页；"></zh-text>
						<zh-text color="grey-darken-2" :font-size="22"  label="2.新生和父母未在同一户口本：需上传①新生所在户主页，②父亲页，③母亲页，④新生页，⑤父母结婚证或孩子出生证；"></zh-text>
						<zh-text color="grey-darken-2" :font-size="22"  label="3.上传照片的信息需要完整、清晰，不可缺角。"></zh-text>
					</template>
				</zh-form-upload>
				<zh-form-item :label="item.property"   :required="item.requiredFlag==='1'" :layout="(item.propertyType === '11'||item.propertyType === '3')?'vertical':''"  v-for="(item,index) in data.fieldList" :key="index" :desc="item.description" :maxFile="item.max">
					<zh-input v-if="item.propertyType === '1'" v-model="item.value" showClear></zh-input>
					<zh-input v-if="item.propertyType === '11'" v-model="item.value" type="textarea" showClear></zh-input>
					<zh-datetime  v-if="item.propertyType === '2'" placeholder="请输入日期" v-model="item.value"  showClear model="day" :transprent="true"></zh-datetime>
					<template v-if="item.propertyType === '3'" v-slot:labelRight>
						<view class="flex-row-center-end">
						<zh-text color="blue" :label="getUploadCount(item)"></zh-text>
						<zh-text label="/"></zh-text>
						<zh-text :label="item.max||9"></zh-text>
						</view>
					</template>
					<zh-upload
						v-if="item.propertyType === '3'"
						v-model="item.value"
						:fileType="['image']"
						:rows="3"
						:maxFile="item.max||9"
						:width="620"
					>
					</zh-upload>
					<zh-text style="padding:5rpx 0" v-if="item.propertyType === '3'&&item.defaultPhotos" color="blue" :label="item.property+'示例'"></zh-text>
					<zh-image-group v-if="item.propertyType === '3'&&item.defaultPhotos">
					    <zh-image :padding="[2,2]" preview :width="190" :height="156" :src="url"  v-for="url in item.defaultPhotoList" :key="url"></zh-image>
					</zh-image-group>
				</zh-form-item>
			</template>
		</zh-card>
		<followInfo v-if="data.schoolInfo.followFlag==='1'" v-model="form" ></followInfo>
		<bindInfo ref="bindRef" v-if="data.schoolInfo.bindFlag==='1'" v-model="form"></bindInfo>
		
		<zh-form-item :border="false">
			<view class="flex flex-row">
				<view class="flex-1 mr-32" style="margin: 0 auto">
					<zh-button form-type="submit" :disabled="data.btnDisabled" :loading="data.btnDisabled" label="提交信息" block  color="#85a5ff" linear="right"></zh-button>
				</view>
			</view>
		</zh-form-item>
	</zh-form>
	</zh-spin>
	<zh-message ref="messageRef" :duration="2000"></zh-message>
	<zh-modal title="报名成功" :content="data.successMsg" cancelText="关闭页面" okText="前往我的报名" :overlayClick="false" v-model:show="data.showSuccess" @ok="onOk" @cancel="onCancel"></zh-modal>

	</zh-app>
</template>

<script lang="ts" setup>
	import {ref, reactive} from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import * as util from '@/tool/function/util'
	import followInfo from './components/followInfo.vue';
	import bindInfo from './components/bindInfo.vue';
	const messageRef=ref();
	const bindRef=ref();
	const form=ref<any>({childCardType:'01',fatherCardType:'01',motherCardType:'01',schoolId:'',schoolName:'',configType:'',configTypeName:'',formId:'',followFlag:'0',bindFlag:'0'})
	const data = reactive({
		dictData:{} as any,//数据字典
		schoolInfo:{} as any,//学校信息
		configTypeDict:[] as any,//报名学段
		selectFormDictData:[] as any,//报名类别
		fieldList:[] as any,//动态字段信息
		showFlag:false,//是否显示报名材料
		showForm:false,//是否显示报名类别
		btnDisabled:false,
		showSuccess:false,
		successMsg:'',//报名成功提示
		sexDict: [{
			dictKey: '1',
			dictValue: '男'
		}, {
			dictKey: '2',
			dictValue: '女'
		}],
		cardTypeDict: [{
			dictKey: '01',
			dictValue: '身份证'
		}, {
			dictKey: '99',
			dictValue: '其他证件'
		}],

	})
	//初始化
	onLoad((options: any) => {
		if(options.configType){
			form.value.configType=options.configType
		}
		if(options.configTypeName){
			form.value.configTypeName=options.configTypeName
		}
		if(options.schoolId){
			form.value.schoolId=options.schoolId
			getSchoolInfo()
		}

	})
	const getSchoolInfo=()=>{
		$api.common.send.post("eduschool0002",{orgId:form.value.schoolId}).then((res:any)=>{
			data.schoolInfo=Object.assign({},res.result||{})
			form.value.schoolName=data.schoolInfo.schoolName
			//设置学段
			let configList=data.schoolInfo.configList||[]
			let list=[]
			if(configList&&configList.length>0){
				list=configList.filter((item :any) => item.enrollStatus==='on')
			}
			if(list.length>0){
				data.showForm=true
			}else{
				data.showForm=false
			}
			data.configTypeDict=list;

			setForm()
		}).catch(() => {

		})
	}
	const configTypeChange=(val :string,list:any)=>{
		//报名学段变动
		form.value.formId=''
    form.value.configTypeName=list[0].configTypeName
		setForm()
	}
	const setForm=()=>{
		//设置报名表单
		if(!form.value.configType){
			data.selectFormDictData=[]
			return
		}
		//设置招生类别
		let formList=data.schoolInfo.formList;
		let list=[]
		if(formList&&formList.length>0){
			list=formList.filter((item :any) => item.configType===form.value.configType)
		}
		data.selectFormDictData=list
		if(list.length===1){
			form.value.formId=list[0].formId
			form.value.configName=list[0].configName
			form.value.formType=list[0].formType
			form.value.orderNo=list[0].orderNo
			setFormField()
		}

	}
	const formChange=(val:string,selectList:any)=>{
		//报名类别变化
		if(val){
			form.value.configName=selectList[0].configName
			form.value.formType=selectList[0].formType
			form.value.orderNo=selectList[0].orderNo
			setFormField()
		}else{
			form.value.bindFlag='0'
		}
		
	}
	const setFormField=()=>{
    if(data.schoolInfo.bindFlag==='1'){
      bindRef.value?.checkBind()
    }
		//设置报名表单字段
		if(!form.value.formId){
			data.fieldList=[]
			data.showFlag=false
			return
		}
		
		data.showFlag=true
		let fieldList=data.schoolInfo.formParams?data.schoolInfo.formParams[form.value.formId]||[]:[];
		fieldList.forEach((el:any) => {
			if(el.defaultPhotos){
				el.defaultPhotoList=el.defaultPhotos.split(',')
			}
		})
		data.fieldList=fieldList
	}
	const onblurChange=()=>{
   if(data.schoolInfo.bindFlag==='1'){
     bindRef.value.checkBind()
   }
	}
  const onclearIdcard=()=>{
    form.value.childIdcard=""
    if(data.schoolInfo.bindFlag==='1'){
      bindRef.value.checkBind()
    }
  }
  const onclearbirth=()=>{
    form.value.birthYmd=""
    if(data.schoolInfo.bindFlag==='1'){
      bindRef.value.checkBind()
    }
  }
  const onclearfa=()=>{
    form.value.fatherIdcard=""
    if(data.schoolInfo.bindFlag==='1'){
      bindRef.value.checkBind()
    }
  }
  const onclearmo=()=>{
    form.value.motherIdcard=""
    if(data.schoolInfo.bindFlag==='1'){
      bindRef.value.checkBind()
    }
  }
	const submit=(e:any) => {
		if(e.validate){
			if(form.value.fileList.length<3){
				let messageData: any = {}
				messageData.model = 'warn'
				messageData.text = '请上传至少三张相关照片材料！'
				messageRef.value.show(messageData)
				return
			}
			let saveForm=Object.assign({},form.value) as any;
			let flag=false;
			let messageData: any = {}
			messageData.model = 'warn'
			messageData.text = '请输入必填信息'
			if (form.value.childCardType==='01'&&!util.isIdCard(form.value.childIdcard)) {
				messageData.text = '请输入正确的学生身份证！'
				messageRef.value.show(messageData)
				return
			}
			let fimalyFlag=false
			if(form.value.fatherIdcard){
			  if (form.value.fatherCardType==='01'&&!util.isIdCard(form.value.fatherIdcard)) {
			    messageData.text = '请输入正确的父亲（监护人）身份证！'
			    messageRef.value.show(messageData)
			    return
			  }
			  fimalyFlag=true
			}
			if(form.value.fatherPhone){
			  if(!util.isPhone(form.value.fatherPhone)){
			    messageData.text = '请输入正确的父亲（监护人）手机号码！'
			    messageRef.value.show(messageData)
			    return
			  }
			}

			if(form.value.motherIdcard){
			  if (form.value.motherCardType==='01'&&!util.isIdCard(form.value.motherIdcard)) {
			    messageData.text = '请输入正确的母亲身份证！'
			    messageRef.value.show(messageData)
			    return
			  }
			  fimalyFlag=true
			}
			if(form.value.motherPhone){
			  if(!util.isPhone(form.value.motherPhone)){
			    messageData.text = '请输入正确的母亲手机号码！'
			    messageRef.value.show(messageData)
			    return
			  }
			}
			if(!fimalyFlag){
			  messageData.text = '父亲（监护人）或母亲信息至少输入一方！'
			  messageRef.value.show(messageData)
			  return
			}
			for (var i = 0; i < data.fieldList.length; i++) {
				let fieldParam :any=data.fieldList[i]
				if (fieldParam.value) {
					saveForm[toHump(fieldParam.param)] = fieldParam.value
					if (fieldParam.propertyType === '3') {
						let files=fieldParam.value.split(',')
						if(fieldParam.min&&fieldParam.min>0){
							if(files.length<fieldParam.min){
								messageData.text = '请上传至少'+fieldParam.min+'张'+fieldParam.property+'相关材料！'
								flag=true;
								break
							}
						}

					}
				}else{
					if(fieldParam.requiredFlag==='1'){
						messageData.text = fieldParam.property+'信息不能为空';
						flag=true;
						break
					}
				}

			}
			if(flag){
				messageRef.value.show(messageData)
				return
			}

			//报名提交
			data.btnDisabled=true
			$api.common.send.post("kindergarten0015", saveForm).then((res: any) => {
			  //保存成功后提示
			  //data.showSuccess=true
			  //data.successMsg='您的报名编号为：' + res.result.applyId
			  data.btnDisabled=false
			  $router.replace('/pages/edu/enroll/successEnroll', {applyId:res.result.applyId});
			}).catch(()=>{
			  data.btnDisabled=false
			})
		}else{
			let messageData: any = {}
			messageData.model = 'warn'
			messageData.text = '请核对页面表单信息，带红色星号的内容必填！'
			messageRef.value.show(messageData)
			return
		}

	}
	const toHump=(name:String)=> {
		return name.replace(/\_(\w)/g, function(all, letter) {
			return letter.toUpperCase();
		});
	}
	const getUploadCount=(item:any)=>{
		if(item&&item.value){
			return item.value.split(',').length
		}else{
			return 0
		}
	}
	const onOk=()=>{
		//前往我的报名
		$router.replace('/pages/edu/enroll/myEnroll',{})
	}
	const onCancel=()=>{
		//关闭页面
		$router.back(1)
	}
</script>

<style lang="scss" scoped></style>
